<template>
	<view class="flex-col page">
		<image src="/static/31d0c407766868ebf3f03b5dbc256f17.png" class="image" />
		<view class="flex-col group">
			<text class="text">欢迎登录！</text>
			<text class="text_1">请输入手机号密码登录</text>
			<view class="flex-col group_1">
				<view class="flex-row section_1">
					<u-icon name="account" color="#707070" size="30"></u-icon>
					<input style="font-size: 28rpx;flex: 1;" type="text" v-model="form1.username" :maxlength="11"
						placeholder="请输入您的手机号" placeholder-class="input-placeholder" />
				</view>
				<view class="flex-row section_2">
					<u-icon name="lock" color="#707070" size="30"></u-icon>
					<input style="font-size: 28rpx;flex: 1;" type="text" password v-model="form1.password"
						placeholder="请输入您的登录密码" placeholder-class="input-placeholder" />
				</view>
			</view>
			<view class="justify-between group_2">
				<view class="flex-row group_3">
					<text class="text_4" @click="pageTo('../register/register')">去注册</text>
					<text class="text_5">还没有账号？</text>
				</view>
				<text class="text_6" @click="pageTo('../forget/forget')">忘记密码？</text>
			</view>
			<view class="flex-col items-center button" @click="login">
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data: {

				},
				// 表单请求数据
				form1: {
					agreement: true,
					username: '',
					password: ''
				},
				scrollTop: 0,
				invite: getApp().globalData.invite
			}
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options) {
			//防止从其他页面跳转过来时带有loading
			uni.hideLoading()
			that = this;
			vk = that.vk;
			//console.log("onLoad",options);
			that.init(options);
		},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 监听 - 页面触底部
		onReachBottom() {

		},
		// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
		onResize() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 监听 - 页面创建时
		created() {

		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options = {}) {
				console.log("init: ", options);
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 账号密码登录
			login() {
				const {
					agreement,
					username,
					password
				} = that.form1;
				if (!agreement) {
					vk.toast('请阅读并同意用户服务及隐私协议', "none");
					return;
				}
				if (username.length < 4) {
					vk.toast('请正确输入手机号', "none");
					return;
				}
				if (!vk.pubfn.checkStr(password, 'pwd')) {
					vk.toast('请正确输入密码', "none");
					return;
				}
				// 登录操作
				vk.userCenter.login({
					data: that.form1,
					success: function(data) {
						vk.userCenter.updateUser({
							data: { token: [data.token] },
							success: function(data) {
								vk.toast("登陆成功!");
								setTimeout(() => { that.login_success(data) }, 1000);
							}
						})
					}
				})
			},
			login_success(data) {
				//更新推送id
				uni.$emit("upDataClientId", "")
				// 检查是否有指定跳转的页面
				if (vk.navigate.originalPage) {
					vk.navigate.originalTo();
					return false;
				}
				// 跳转到首页,或页面返回
				var pages = getCurrentPages();
				if (pages.length > 1 &&
					pages[pages.length - 2] &&
					pages[pages.length - 2].route &&
					pages[pages.length - 2].route.indexOf('login/index') == -1
				) {
					const eventChannel = that.getOpenerEventChannel();
					eventChannel.emit('loginSuccess', {});
					vk.navigateBack();
				} else {
					// 进入首页
					vk.reLaunch("/pages/index/homePage");
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #f5f5f5;
		width: 100%;
		height: 100vh;
		overflow-y: auto;

		.image {
			width: 100vw;
			height: 11.5vw;
		}

		.group {
			padding: 50rpx 30rpx 0;
			overflow-y: auto;

			.text {
				color: rgb(51, 51, 51);
				font-size: 42rpx;
				line-height: 50rpx;
				letter-spacing: 2.1rpx;
				white-space: nowrap;
				font-weight: bold;
			}

			.text_1 {
				margin-top: 47rpx;
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;
			}

			.group_1 {
				margin-top: 141rpx;
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				line-height: 34rpx;
				white-space: nowrap;

				.section_1 {
					padding: 34rpx 60rpx 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50rpx;
					align-items: center;

					.u-icon {
						margin-right: 12rpx;
					}
				}

				.section_2 {
					margin-top: 40rpx;
					padding: 34rpx 64rpx 32rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 50rpx;
					align-items: center;

					.u-icon {
						margin-right: 12rpx;
					}
				}
			}

			.group_2 {
				margin-top: 44rpx;
				padding-left: 20rpx;
				padding-right: 14rpx;

				.group_3 {
					width: 268rpx;

					.text_4 {
						margin-left: 175rpx;
						color: rgb(255, 150, 12);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}

					.text_5 {
						margin-left: -268rpx;
						color: rgb(153, 153, 153);
						font-size: 28rpx;
						line-height: 34rpx;
						white-space: nowrap;
					}
				}

				.text_6 {
					color: rgb(255, 150, 12);
					font-size: 28rpx;
					line-height: 34rpx;
					white-space: nowrap;
				}
			}

			.button {
				margin-top: 120rpx;
				padding: 32rpx 0 30rpx;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;
				background-color: #333333;
				border-radius: 45rpx;
			}
		}
	}
</style>
